import React, { useState, useEffect } from 'react'
import Tabbar from '@/components/TabBar'
import './assets/style.scss'
import { Checkbox, Stepper, Button, Modal } from 'antd-mobile'
import { useDispatch, useSelector } from 'umi'
import HomeHeader from '../../components/HomeHeader'
      
export default function index() {
  // 使用useDispatch这个hooks调用dva中的管理的dispatch方法引用
  const dispatch = useDispatch();
  // 点击管理显示删除按钮
  const [delBtn, setDelBtn] = useState(false);
  // useSelector这个hooks用于获取状态管理集中的store中state数据
  const { items, total, number } = useSelector(state => state.cart);
  // 修改商品购买数量
  const modifyItemNum = (key: string, number: number) => {
    dispatch({
      type: 'cart/modifyItemNum',
      data: {
        key,
        number
      }
    })
  }
  
// 修改商品选中状态
  const modifyItemSelectedStatus = (key:string, selected: boolean)=> {
    dispatch({
      type: 'cart/modifyItemSelected',
      data: {
        key,
        selected
      }
    })
  }
  const [delKeys, setDelKeys] = useState([]);
  // 删除商品
  const delItem = () => {
    // 得到需要删除所有商品key
    // 弹出确认框
    Modal.confirm({
      title: '删除',
      content: '此操作会彻底删除商品,继续吗?'
    }).then(res => {
      dispatch({
        type: 'cart/removeItem',
        data: {
          key: delKeys.join(',')
        }
      })
    })
  }
  // 点击全选 改变所有商品的选中状态
  const clickAllCheckedBtn = (seleced: boolean) => {
  
    // 得到所有商品的key
    const keys = [];
    items.forEach(item => {
      keys.push(item.key)
    })
    modifyItemSelectedStatus(keys.join(','), seleced)
  }

  // 定义全选状态
  const [allChecked, setAllChecked] = useState(true);
  // 监听items 商品变化 得到全选状态
  useEffect(() => {
    if (items.length !==0) {
      setAllChecked(items.every(item => item.selected))
      // 得到已经选中所有商品的key
      const keys = []
      items.forEach(item => {
        if (item.selected) {
          keys.push(item.key)
        }
      })
      setDelKeys(keys)
    }
  }, [items])
  useEffect(() => {
    dispatch({
      type: 'cart/fetchItemInfo'
    })
  }, [])
  return (
    <div className='cart-page'>
      <HomeHeader className='cart-header-t'/>
      <div className="cart-header">
        
        <div className="head-fl">
          购买数量: {number}
        </div>
        <div className="head-fr" onClick={
          () => {
            setDelBtn(!delBtn)
          }
        }>
          {
            delBtn ? '取消' : '管理'
          }
        </div>
      </div>
      <div className="container">
        {
          items.map(item => (
            <div className="item" key={item.goodsId}>
              <Checkbox checked={item.selected} onChange={
                (value) => {
                  modifyItemSelectedStatus(item.key, value)
                }
              } />
              <img src={item.pic} alt="" />
              <div className="item-info">
                <h5>{item.name}</h5>
                <div className="item-price">
                  <p>￥{item.price}</p>
                  <Stepper defaultValue={item.number} min={1} onChange={
                    (value) => {
                      modifyItemNum(item.key, value)
                    }
                  } />
                </div>
              </div>
            </div>
          ))
        }
      </div>
      {/* 提交订单栏 */}
      <div className="submit-bar">
        <div className='bar-fl'>
          <Checkbox checked={allChecked} onChange={
            (value) =>{
              clickAllCheckedBtn(value)
            }
          }/>
          <span>全选:</span>
        </div>
        <div>
          总价格：￥{total}
        </div>
        {delBtn && <Button onClick = {
          () => {
            delItem()
          }
        }>删除</Button>}
        <Button color="danger">
          立即下单
        </Button>
      </div>
      {/* 提交订单栏 */}
      <Tabbar/>
    </div>
  )
}
